<template>
	<view class="detailContent" >
		<view class="TitleFixed" :style='getTitleTop' v-if="titleTop">
            <img src="https://cdn.yueyangshuyuan.com/detailBack.png" @tap="goBack" />
			<text>商品详情</text>
        </view>
	    <view class="header" :class="{'nav-header_fixed':isFixed}">
            <view class="headerImg">
				<swiper class="swiper-box" @change="changeSwiper">
				    <swiper-item v-for="(item ,index) in listSwiper" :key="index">
				        <view class="swiper-item">
							<img :src="item.fileUrl" class="detailImg" />
				        </view>
				    </swiper-item>
				</swiper>
                
				<view class="backImg" :style="{'position': 'absolute','top':titleBarHeight}" @tap="goBack">
					<img src="https://cdn.yueyangshuyuan.com/detailBack.png" />
				</view>
            </view>
            <view class="headerDetail">
                <view class="h2">{{detailData.title}}</view>
				<view class="detailAll clearfix" v-if="heightAll" style="max-height:144upx;overflow: hidden;">
					<view class="detailFont" :class="showDetailFlag?'detailOn':''">{{detailData.subtitle}}</view>
					<view class="detailBtn" v-if="showDetailFont" @tap="showDetailFontFun">详情 ></view>
				</view>
				<view class="detailAll clearfix" v-if="!heightAll" >
					<view class="detailFont" :class="showDetailFlag?'detailOn':''">{{detailData.subtitle}}</view>
					<view class="detailBtn" v-if="showDetailFont" @tap="showDetailFontFun">详情 ></view>
				</view>
				<view class="price clearfix">
					<span class="red">￥</span>
					<span class="vip-span" v-if="isVIP&&detailData.sales.length&&detailData.sales.indexOf(1)!==-1">
						<span class="red number">{{detailData.vipPrice}}</span>
						<span class="vip-icon">会员价</span>
						<span class="original-price" >原价¥{{detailData.price||0}}</span>
					</span>
					<span class="red number" v-else>{{detailData.price}}</span>
					<!-- <span class="font">元起</span> -->
				</view>
				<view class="mapAll clearfix" @tap="showMap">
					<view class="left">
						<view class="h3">{{detailData.sojournProject.name}}</view>
						<view class="mapFont">{{detailData.sojournProject.geoLocation.address}}</view>
					</view>
					<view class="right">
						<view class="mapImg">
							<img src="https://cdn.yueyangshuyuan.com/map.png" />
						</view>
						<view class="mapFont">去这里</view>
					</view>
				</view>
				<VIPCard ></VIPCard>
            </view>
			<view class="headerMar"></view>
        </view>
        <view class="nav">
			<ul class="nav-tabber border" :class="{'nav-tabber_fixed':isFixed}" :style="getTopX" >
				<li 
				:class="{tabber_active:index == tabActiveIndex}" 
				@tap='switchBar(index)' 
				v-for="(item ,index) in tabbarList" 
				:key="index" >{{item.name}}</li>
			</ul>
			<view class="nav-roadLine border oneF" >
				<img src="https://cdn.yueyangshuyuan.com/行程路线@2x.png" alt="" class="nav-bg_img">
				<view class="nav-title">
					<h2>行程路线</h2>
					<text class="nav-title_Eng">LTINERARY ROUTE</text>
				</view>
				<view class="tripeRoute">
					<rich-text :nodes="detailData.travelRoute"></rich-text>
				</view>
			</view>
			<view class="nav-roadLine border SecF" >
				<img src="https://cdn.yueyangshuyuan.com/图文描述@2x.png" alt="" class="nav-bg_img  nav_detail">
				<view class="nav-title">
					<h2>图文描述</h2>
					<text class="nav-title_Eng">GRPHIC DESCRIPTION</text>
				</view>
				<view class="tripeRoute">
					<rich-text :nodes="detailData.desc"></rich-text>
				</view>
			</view>
			<view class="nav-roadLine threeF" >
				<img src="https://cdn.yueyangshuyuan.com/购买@2x.png" alt="" class="nav-bg_img nav_buy">
				<view class="nav-title">
					<h2>购买须知</h2>
					<text class="nav-title_Eng">PURCHASE INSTRUCTIONS</text>
				</view>
				<div class="tripeRoute">
					{{detailData.payNotice}}
				</div>
			</view>
		</view>
        <view class="footer clearfix">
			<view class="enshrine" @tap="enshrineHandle">
				<img src="https://cdn.yueyangshuyuan.com/enshrine.png" v-if="enshrine" />
                <img src="https://cdn.yueyangshuyuan.com/enshrineCheck.png" v-else />
				<p class="font">{{enshrine?'收藏':'已收藏'}}</p>
			</view>
			<button class="enshrine" @tap='shrar'>
			<!-- <button class="enshrine" open-type='share'> -->
				<img src="https://cdn.yueyangshuyuan.com/share.png" />
				<p class="font">分享</p>
			</button>
			<view class="enshrine" @tap="customerHandle">
				<img src="https://cdn.yueyangshuyuan.com/customer.png" />
				<p class="font">客服</p>
			</view>
			<view class="sumitReserve" @tap='order'>立即预定</view>
		</view>
		 <div class="mask" v-if="shareType||shareImg" @tap='closeMask'></div>
		<view v-if='shareType' class='shareChoose'>
			<div class='shareTitle'>
				<i class="line"></i>
				<span>分享到</span>
				<i class="line"></i>
			</div>
			<div class='shareContent'>
				<button class="enshrine" open-type='share'>
					<img src="https://cdn.yueyangshuyuan.com/weixin%20.png" />
					<p class="font">微信好友</p>
				</button>
				<div @tap='eventDraw'>
					<img src="https://cdn.yueyangshuyuan.com/haibao%20.png" />
					<p class="font">生成海报</p>
				</div>
				<div>
					<img src="https://cdn.yueyangshuyuan.com/lianjie.png" />
					<p class="font">复制链接</p>
				</div>
			</div>
		</view>
		<div v-show="shareImg" class='showImgMsak'>
			<image :src="shareImage" class="share-image" mode="aspectFit"></image>
			<button @click="eventSave" class='saveImgBtn'>保存图片至相册</button>
		</div>
		<canvasdrawer :painting="painting" class="canvasdrawer" @getImage="eventGetImage"/>
	</view>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import VIPCard from '../../components/vipCard';
import canvasdrawer from '../../components/uniapp-canvas-drawer/uniapp-canvas-drawer';
	export default {
		components: {
			canvasdrawer,
		},
		data() {
			return {
				toView:'',
				isFixed:false,
				stickyTop:'',
				scrollTop:'',
				navContent:[],
				payNotice:'',
				tabbarList:[{
					id:'F1',
					name:'行程路线'
				},{
					id:'F2',
					name:'图文描述'
				},{
					id:'F3',
					name:'购买须知'
				}],
				tabActiveIndex:0,
				height:"",
				heightAll:true,
				detailData:{},
				showDetailFont:false,
				showDetailFlag:false,
				latitude:31.193987,
				longitude:121.31891000000002,
				workPlace:"虹桥火车站(地铁站)",
                phone:this.servicePhone,
				enshrine:true,
				merchId:"",
				titleBarHeight:"",
				listSwiper:[],
				isPlat:-1,
				position:0,
				clickTab:false,
				titleTop:false,
				painting:{},
				shareType:false,
				shareImg:false,
				shareImage: ''
			}
		},
		watch: {
			
		},
		created(){
			this.getPhoneType();
			this.getServicePhone()
		},
		mounted(){
			
			// this.$api.merchDetail({
			// },this.merchId).then(json=>{
			// 	this.detailData = json;
			// 	this.enshrine=!this.detailData.collected;
			// 	this.latitude = this.detailData.sojournProject.geoLocation.latitude;
			// 	this.longitude = this.detailData.sojournProject.geoLocation.longitude;
			// 	this.workPlace = this.detailData.sojournProject.geoLocation.workPlace;
			// 	this.$nextTick(()=>{
			// 		this.init();
			// 		this.getScrollPosition();
			// 	})
			// });
		},	
		onLoad:function(options)  {
			console.log(options);
			const that = this;
			const scene = decodeURIComponent(options.scene);
			console.log(scene)
			this.merchId=options.merchId;
			this.setMerchInfoForOrder({
				merchId:this.merchId
			})
			setTimeout(() => {
				uni.getSystemInfo({
					success: function(res) {
						let navTabber = uni.createSelectorQuery().select('.nav-tabber');
						navTabber.boundingClientRect(function(res) { //data - 各种参数
				　　　  　 	that.stickyTop = res.top;
				　　     }).exec();
					}
				});
			}, 10)
		},
		onShareAppMessage(options){//取消分享成功的回调
			let shareObj = {
		　　　　 title: this.detailData.title,        // 小程序的名称
		　　　　 path: '/pages/detail/detail?merchId='+this.merchId,        // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '',     //自定义图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　　}
	　　	return shareObj;
		},
		onShow() {
			this.getPhoneType();
			this.initPhone();
			this.getUserDetail()
			this.$api.merchDetail({
			},this.merchId).then(json=>{
				this.detailData = json;
				this.enshrine=!this.detailData.collected;
				this.latitude = this.detailData.sojournProject.geoLocation.latitude;
				this.longitude = this.detailData.sojournProject.geoLocation.longitude;
				this.workPlace = this.detailData.sojournProject.geoLocation.workPlace;
				this.listSwiper=json.merchPic;
				this.detailData.travelRoute = this.formatRichText(this.detailData.travelRoute);
				this.detailData.desc = this.formatRichText(this.detailData.desc);
				
				this.$nextTick(()=>{
					this.setMerchInfoForOrder({
						merchId:this.merchId,
						sales:this.detailData.sales
					})
					this.init();
					this.getScrollPosition();
					
				})
			});
			this.getServicePhone();
		},
		computed: {
			...mapState(['servicePhone','phoneData','hasLogin', 'isVIP','forcedLogin']),
			getBottomX(){
				if(this.isPlat == 3){
					return 'margin-bottom:86px';
				}
			},
			getTopX(){
				if(this.isFixed){
					if(this.isPlat == 3){
						return 'padding-top:92px';
					}else if(this.isPlat == 2){
						return 'padding-top:70px';
					}else if(this.isPlat == 1){
						return 'padding-top:70px';
					}
				}else{
					return 'padding-top:0';
				}
			},
			getTitleTop(){
				if(this.isPlat == 3){
					return 'padding-top:54px';
				}else if(this.isPlat == 2){
					return 'padding-top:32px';
				}else if(this.isPlat == 1){
					return 'padding-top:32px';
				}
			}
		},
		methods: {
			...mapMutations(['getServicePhone','getPhoneType','setMerchInfoForOrder','loginStateInfo']),
			switchBar(i){
				this.clickTab = true;
				setTimeout(()=>{
					this.tabActiveIndex = i;
					this.clickTab = false;
				},300);
				if(this.isPlat == 3){
					this.position = this.navContent[i]-100 -80;
				}else if(this.isPlat == 2){
					this.position = this.navContent[i]-100 -60;
				}else if(this.isPlat == 1){
					this.position = this.navContent[i]-100 -60;
				}
				uni.pageScrollTo({
					scrollTop:this.position,
					duration: 300
				});
			},
			initPhone(){
				if (this.phoneData.model.indexOf('iPhone') !== -1) {
					this.titleBarHeight=this.phoneData.statusBarHeight+5+"px";
					if(this.phoneData.screenHeight >= 812){//x
						this.isPlat = 3;
					}else{
						this.isPlat = 2;
					}
				} else {
					this.titleBarHeight=this.phoneData.statusBarHeight+7+"px";
					this.isPlat = 1;
				}
			},
			showMap(){
				if (this.latitude != -1 && this.longitude !=-1){
					uni.openLocation({
						latitude:this.latitude,
						longitude:this.longitude,
						address: this.workPlace,
						name: "[位置]"
					})
				}
			},
			//切换swiper
			changeSwiper(e){
				// this.current = e.detail.current;
			},
			//点击收藏
			enshrineHandle(){
				if(this.enshrine){ //收藏
					// collectAdd
					this.$api.collectAdd({
						merchId:this.merchId
					}).then(json=>{
						// console.log(json,"")
						this.enshrine=!this.enshrine;
					})
				}else {  //取消收藏
					// collectDelect
					this.$api.collectDelect({
					},this.merchId).then(json=>{
						// console.log(json,"")
						this.enshrine=!this.enshrine;
					})
				}
				
			},
			//点击返回
			goBack(){
				// uni.navigateTo({
				// 	url: '/pages/homePage/homePage'
				// })
				uni.navigateBack({
				  delta: 1
				})
			},
			//点击客服
			customerHandle(){
				uni.makePhoneCall({
				  phoneNumber: this.servicePhone
				})
			},
			shrar(){
				uni.showToast({
					title: '此功能暂未开通',
					icon: 'none',
					duration: 1000
				})

				// if(this.hasLogin){
					// this.shareType = true;
				// }else{
				// 	uni.navigateTo({
				// 		url: '../login/login',
				// 	});
				// }	
			},
			shareInfo(type){
				this.$api.shareInfo({
					merchId:this.merchId,
					type:type
				}).then(json=>{
					console.log(json)
					uni.hideLoading();
				})
			},
			closeMask(){
				this.shareType = false;
				this.shareImg = false;
			},
			eventDraw(){
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				this.shareInfo(1)
				// this.painting = {
				// 	width: 375,
				// 	height: 555,
				// 	clear: true,
				// 	views: [
				// 		{
				// 			type: 'image',
				// 			url:this.detailData.merchPic[0].fileUrl,
				// 			top: 0,
				// 			left: 0,
				// 			width: 375,
				// 			height: 555
				// 		},
				// 		{
				// 			type: 'image',
				// 			url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83erma73GwPeY6QhTwTlkMiaSICnA2aeW43Jv4N1fvuwRTYyxMIqVOBicKg4wBJjeCcU32uAIFf3b4mOQ/132',
				// 			top: 27.5,
				// 			left: 29,
				// 			width: 55,
				// 			height: 55
				// 		},
				// 		{
				// 			type: 'image',
				// 			url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',
				// 			top: 27.5,
				// 			left: 29,
				// 			width: 55,
				// 			height: 55
				// 		},
				// 		{
				// 			type: 'text',
				// 			content: '您的好友【王独秀】',
				// 			fontSize: 16,
				// 			color: '#402D16',
				// 			textAlign: 'left',
				// 			top: 33,
				// 			left: 96,
				// 			bolder: true
				// 		},
				// 		{
				// 			type: 'text',
				// 			content: '发现一件好货，邀请你一起0元免费拿！',
				// 			fontSize: 15,
				// 			color: '#563D20',
				// 			textAlign: 'left',
				// 			top: 59.5,
				// 			left: 96
				// 		},
				// 		{
				// 			type: 'image',
				// 			url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
				// 			top: 136,
				// 			left: 42.5,
				// 			width: 290,
				// 			height: 186
				// 		},
				// 		{
				// 			type: 'image',
				// 			url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83erma73GwPeY6QhTwTlkMiaSICnA2aeW43Jv4N1fvuwRTYyxMIqVOBicKg4wBJjeCcU32uAIFf3b4mOQ/132',
				// 			top: 443,
				// 			left: 85,
				// 			width: 68,
				// 			height: 68
				// 		},
				// 		{
				// 			type: 'text',
				// 			content: '正品MAC魅可口红礼盒生日唇膏小辣椒Chili西柚情人',
				// 			fontSize: 16,
				// 			lineHeight: 21,
				// 			color: '#383549',
				// 			textAlign: 'left',
				// 			top: 336,
				// 			left: 44,
				// 			width: 287,
				// 			MaxLineNumber: 2,
				// 			breakWord: true,
				// 			bolder: true
				// 		},
				// 		{
				// 			type: 'text',
				// 			content: '￥0.00',
				// 			fontSize: 19,
				// 			color: '#E62004',
				// 			textAlign: 'left',
				// 			top: 387,
				// 			left: 44.5,
				// 			bolder: true
				// 		},
				// 		{
				// 			type: 'text',
				// 			content: '原价:￥138.00',
				// 			fontSize: 13,
				// 			color: '#7E7E8B',
				// 			textAlign: 'left',
				// 			top: 391,
				// 			left: 110,
				// 			textDecoration: 'line-through'
				// 		},
				// 		{
				// 			type: 'text',
				// 			content: '长按识别图中二维码帮我砍个价呗~',
				// 			fontSize: 14,
				// 			color: '#383549',
				// 			textAlign: 'left',
				// 			top: 460,
				// 			left: 165.5,
				// 			lineHeight: 20,
				// 			MaxLineNumber: 2,
				// 			breakWord: true,
				// 			width: 125
				// 		}
				// 	]
				// }
			},
			eventSave () {
			    uni.saveImageToPhotosAlbum({
					filePath: this.shareImage,
					success (res) {
						uni.showToast({
							title: '保存图片成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			eventGetImage(event) {
				uni.hideLoading();
				this.shareType = false;
				this.shareImg = true;
				// const { tempFilePath, errMsg } = event.detail
				// const result = event.detail.__args__
				const tempFilePath = event.tempFilePath
				const errMsg = event.errMsg
				if (errMsg === 'canvasdrawer:ok') {
					this.shareImage = tempFilePath
					this.painting = {}
				}
			},
			getUserDetail(){
				this.$api.getUser({}).then(json=>{
					if(json.code !== -1){
						this.loginStateInfo(json.data);
					}
				});
			},
			//立即预定
			order(){
				if(this.hasLogin){
					this.setMerchInfoForOrder({
						merchId:this.merchId,
						sales:this.detailData.sales
					})
					uni.navigateTo({
						url: '/pages/priceCalender/priceCalender?merchId='+this.merchId
					});
				}else{
					uni.navigateTo({
						url: '../login/login',
					});
				}	
			},
			//初始化
			init() {
				let info = uni.createSelectorQuery().select(".detailFont");
		　　　  　info.boundingClientRect((data)=> { //data - 各种参数
					this.height=data.height;
					// console.log(this.height,999999999);
					if(this.height-72>0){ //超过三行
					this.showDetailFont=true;	
					this.heightAll=true;
					}else {
						this.showDetailFont=false;
					}
		　　     }).exec();
			},
			showDetailFontFun(){
				this.showDetailFont=false;  //隐藏详情按钮
				this.showDetailFlag=true;
				this.heightAll=false;
			},
			getScrollPosition(){
				const that = this;
				setTimeout(()=>{
					uni.getSystemInfo({
						success: function(res) {
							let navTabber = uni.createSelectorQuery().select('.oneF');
							navTabber.boundingClientRect(function(res) { //data - 各种参数
					　　　  　 that.navContent[0] = res.top;
					　　     }).exec();
						}
					});
					uni.getSystemInfo({
						success: function(res) {
							let navTabber = uni.createSelectorQuery().select('.SecF');
							navTabber.boundingClientRect(function(res) { //data - 各种参数
					　　　  　 that.navContent[1] = res.top;
					　　     }).exec();
						}
					});
					uni.getSystemInfo({
						success: function(res) {
							let navTabber = uni.createSelectorQuery().select('.threeF');
							navTabber.boundingClientRect(function(res) { //data - 各种参数
					　　　  　 that.navContent[2] = res.top;
					　　     }).exec();
						}
					});
				},300);
			},
			formatRichText (html) { //控制小程序中图片大小
				/**
				 * 处理富文本里的图片宽度自适应
				 * 1.去掉img标签里的style、width、height属性
				 * 2.img标签添加style属性：max-width:100%;height:auto
				 * 3.修改所有style里的width属性为max-width:100%
				 * 4.去掉<br/>标签
				 * @param html
				 * @returns {void|string|*}
				 * */
				let newContent;
			    newContent = html.replace(/<img[^>]*>/gi,function(match,capture){
			        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			        return match;
			    });
			    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
			        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			        return match;
			    });
			    // newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			    return newContent;
			}
		},
		onReady() {
		},
		
		//页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			this.titleTop = this.scrollTop > 150 ? true : false;
			if(this.scrollTop > this.stickyTop-80){
				this.isFixed = true;
				this.navContent.length == 3 && this.navContent.forEach((item,index)=>{
					if(this.scrollTop >= (item - 180)){//174
						if(!this.clickTab){
							this.tabActiveIndex = index;
						}
					}
				})
			}else{
				this.isFixed = false;
			}
		},
	}
</script>

<style  lang="scss">
	page{
		height: 100%;
	}
	
	.fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
    }
	.border{
		border-bottom: 1px solid #DDDDDD;
	}
	swiper,swiper image {
		height:548upx;
	}
	.TitleFixed{
		position: fixed;
		top: 0;
		left: 0;
		color: #262626;
		background: #fff;
		width:100%;
		z-index:1000;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding-bottom: 14px;
		border-bottom: 1px solid #ddd;
		img {
			width:64upx;
			height:64upx;
			position: absolute;
			left: 12px;
		}
	}
	
    .detailContent {
		padding-bottom:108upx;
		box-sizing: border-box;
		overflow-x: hidden;
        .header {
            .headerImg {
				position: relative;
				width:750upx;
				height:548upx;
                .detailImg {
                    display: block;
					width:750upx;
					height:548upx;
                }
				.backImg {
					position: absolute;
					left:22upx;
					z-index:99;
					img {
						width:64upx;
						height:64upx;
					}
				}
            }
			
			.headerDetail {
				width:100%;
				padding:30upx 30upx 0 30upx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 28upx 28upx 0 0;
				-webkit-border-radius: 28upx 28upx 0 0;
				position: relative;
				top:-50upx;
				left:0;
				z-index:9;
				.detailAll {
					position: relative;
				}
				
				.h2{
                    font-size: 48upx;
                    color: #262626;
                    font-weight: 700;
					margin-bottom: 20upx;
                }
				.detailFont{
					font-size: 30upx;
					color: #777777;
					letter-spacing: 0;
					line-height: 48upx;
					width:100%;
					// max-height:144upx;
					// overflow-y: hidden;
				}
				.detailOn {
					max-height:auto;
					height: auto;
					overflow-y:inherit;
				}
				.detailBtn {
					width:125upx;
					height:48upx;
					line-height:48upx;
					position: absolute;
					right:0upx;
					top:96upx;
					font-size: 28upx;
					color: #262626;
					text-align: right;
					line-height: 48upx;
					background: #fff;
				}
				.price {
					padding:30upx 0;
					span {
						float: left;
						font-size: 26upx;
						color: #777777;
						line-height: 60upx;
					}
					.vip-span{
						
					}
					.red {
						font-size: 32upx;
						color: #E25422;
						line-height: 60upx;
						margin-left: 0upx;
					}
					.number {
						font-size: 48upx;
						color: #E25422;
						line-height: 48upx;
						margin-left: 5upx;
					}
					.vip-icon{
						width: 92upx;
						height: 36upx;
						background: #F5A623;
						border-radius: 4rpx;
						line-height: 36upx;
						text-align: center;
						font-size: 20upx;
						color: #FFFFFF;
						display: inline-block;
						position: relative;
						top: 8rpx;
						margin-left: 20upx;
						letter-spacing: 4rpx;
					}  
					.original-price{
						margin-left: 22upx;
						font-size: 20upx;
						color: #777777;
						text-decoration: line-through;
						position: relative;
						top: -2rpx;
					}
				}
				.mapAll {
					width:100%;
					background: #F7F7FD;
					border-radius: 8px;
					-webkit-border-radius: 8px;
					padding:30upx;
					box-sizing: border-box;
					.left {
						float: left;
						width:520upx;
						.h3 {
							width:100%;
							font-size: 28upx;
							color: #262626;
							overflow:hidden;
							white-space:nowrap;
							text-overflow:ellipsis;
							font-weight: 700;
						}
						.mapFont {
							width:100%;
							font-size: 26upx;
							color: #777777;
							letter-spacing: 0;
							line-height: 40upx;
							overflow:hidden;
							white-space:nowrap;
							text-overflow:ellipsis;
							margin-top:20upx;
						}
					}
					.right {
						float: left;
						width:110upx;
						.mapImg {
							float: left;
							width:100%;
							height:55upx;
							position: relative;
							img {
								width:44upx;
								height:54upx;
								position: absolute;
								left:50%;
								top: 0;
								-webkit-transform:translate(-50%,0%);
								transform:translate(-50%,0%);
							}
						}
						.mapFont {
							float: left;
							width:100%;
							font-size: 26upx;
							color: #4479F2;
							text-align: center;
							line-height: 48upx;
							
						}
					}
				}
			}
			.headerMar {
				width:100%;
				height:20upx;
				background:#f7f7f7;
			}
        }
		.nav{
			width: 750rpx;
			.nav-tabber{
				display: flex;
				align-items: center;
				height: 100rpx;
				width: 100%;
				background: #fff;
				._li{
					margin-left: 80rpx;
					font-size: 32rpx;
					color: #777777;
					font-weight: bold;
					height: 100%;
					line-height: 100rpx;
					position: relative;
					&:first-child{
						padding-left: 14rpx;
					}
					&::before{
						content: "";
						display: inline-block;
						background: #E25422;
						border-radius: 100px 100px 0 0;
						width: 64rpx;
						height: 8rpx;
						text-align: center;
						display: none;
						position: absolute;
						bottom:0;
						left: 50%;
						transform: translateX(-50%);
						-webkit-transform: translateX(-50%);
					}
				}
				.tabber_active{
					color: #262626;
					&::before{
						display: block;
					}
				}
			}
			
			.nav-tabber_fixed{
				position: fixed;
				top: 0;
				z-index: 999;
			}
				
			.nav-roadLine{
				padding-bottom: 40rpx;
				position: relative;
				.nav-bg_img{
					position: absolute;
					left: 0;
					top: 22rpx;
					width: 84rpx;
					height: 94rpx;
				}
				.nav_detail{
					width: 108rpx;
					height: 108rpx;
					top: 11rpx;
				}
				.nav_buy{
					width: 78rpx;
					height: 92rpx;
					top: 27rpx;
				}
				.nav-title{
					padding: 0 36rpx;
					padding-top: 52rpx;
					margin-bottom:24rpx;
					._h2{
						font-size: 40rpx;
						color: #262626;	
						font-weight: bold;
					}
					.nav-title_Eng{
						font-size: 20rpx;
						color: #B1B1B1;
						font-weight: bold;
						position: relative;
						top: -11rpx;
						left: 4rpx;
					}
				}
				.tripeRoute{
					margin: 0 auto;
					width: calc(100% - 72rpx);
					 word-break:break-all;
        			white-space: pre-wrap;
					
				}
			}
		}
		.nav-header_fixed{
			// padding-top: 200rpx;
		}
		.footer {
			width:100%;
			height:108upx;
			position: fixed;
			bottom:0;
			left:0;
			z-index:99;
			background: #FFFFFF;
			box-shadow: 0 -10upx 16upx 0 rgba(164,164,164,0.20);
			padding:13upx 20upx;
			box-sizing: border-box;
			.enshrine {
				outline: none;
				margin:0;
				padding:0;
				border:none;
				background:none;
				line-height:30upx;
				float:left;
				width:100upx;
				height:82upx;
				position: relative;
				img {
					width:44upx;
					height:44upx;
					position: absolute;
					left:50%;
					margin-left:-22upx;
					top:5upx;
				}
				.font {
					float: left;
					width:100%;
					text-align: center;
					font-size: 20upx;
					color: #262626;
					margin-top:55upx;
				}
			}
			.enshrine::after {
				outline: none;
				margin:0;
				padding:0;
				border:none;
				background:none;
				line-height:30upx;
			}
			.sumitReserve {
				float: left;
				width:410upx;
				hieght:82upx;
				line-height: 82upx;
				background: #E25422;
				border-radius: 106upx;
				font-size: 32upx;
				color: #FFFFFF;
				letter-spacing: 0;
				text-align: center;
			}
		}
		.cale-notVIP{
			left: -24rpx;
			margin-bottom: 0;
		}
    }
	.mask{
        position: fixed;
        bottom: 0px;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        z-index: 1000;
    }
	.shareChoose{
		position: fixed;
        bottom: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        z-index: 1001;
		height: 300upx;
		background: #fff;
		border-radius: 24upx 24upx 0 0;
		width: 100%;
		box-sizing: border-box;
		padding: 40upx 86upx 44upx;
		.shareTitle{
			font-size: 28upx;
			color: #262626;
			text-align: center;
			width: 100%;
			.line{
				background: #D4D4D4;
				height: 1px;
				width: 126upx;
				display: inline-block;
				position: relative;
				top: -4rpx;
			}
			span{
				padding: 0 40rpx;
			}
		}
		.shareContent{
			display: flex;
			width: 100%;
			margin-top: 34upx;
			justify-content: space-between;
			align-items: center;
			.enshrine {
				outline: none;
				margin:0;
				padding:0;
				border:none;
				background:none;
				line-height: 42rpx;
			}
			.enshrine::after {
				outline: none;
				margin:0;
				padding:0;
				border:none;
				background:none;
				line-height: 42rpx;
			}
			div{
				position: relative;
			}
			p{
				font-size: 24upx;
				color: #777777;
			}
			img {
				width:96upx;
				height:96upx;
			}
		}
		
		
	}
	.showImgMsak{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		z-index: 1001;
		.share-image {
			width: 664upx;
			height: 1080upx;
			border-radius: 0px 0px 24upx 24upx;
		}
		.saveImgBtn{
			margin-top: 36upx;
			border: none;
			outline: none;
			background: #FFFFFF;
			box-shadow: 0 -10upx 16upx 0 rgba(164,164,164,0.20);
			border-radius: 24upx;
			width: 664upx;
			height: 108upx;
			line-height: 108upx;
			text-align: center;
		}
	}
	
</style>
